<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理（商家版）</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div class="whole-flex-center-between whole-top-handle">
				<div class="">
					<el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
					<el-select size="small" v-model="searchForm.status" style="margin-right:5px" placeholder="选择订单状态">
						<el-option label="全部" :value="null"></el-option>
						<el-option label="待支付" :value="0"></el-option>
						<el-option label="已支付" :value="1"></el-option>
						<el-option label="已退款" :value="2"></el-option>
					</el-select>
					<el-input class="input-w" size="small" v-model="searchForm.orderNo" placeholder="系统订单号" clearable>
					</el-input>
					<el-input class="input-w" size="small" v-model="searchForm.externalOrderNo" placeholder="外部订单号"
						clearable></el-input>
					<el-input class="input-w" size="small" v-model="searchForm.channelOrderNo" placeholder="渠道订单号"
						clearable></el-input>
					<el-date-picker v-model="searchForm.time" value-format="timestamp" size="small" type="datetimerange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
					<el-button size="small" @click="getList(1,searchForm)">查询</el-button>
					<el-button size="small" @click="down(searchForm)">下载</el-button>
				</div>
			</div>
			<div class="whole-flow-table-box">
				<el-table ref="myTable" :data="list" border stripe>
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="shrink-box">
								<el-form-item label="订单ID">
									<span>{{ props.row.order_id }}</span>
								</el-form-item>
								<el-form-item label="订单名称">
									<span>{{ props.row.body }}</span>
								</el-form-item>
								<el-form-item label="系统订单号">
									<span>{{ props.row.order_no }}</span>
								</el-form-item>
								<el-form-item label="外部订单号">
									<span>{{ props.row.external_order_no }}</span>
								</el-form-item>
								<el-form-item label="渠道订单号">
									<span>{{ props.row.channel_order_no }}</span>
								</el-form-item>
								<el-form-item label="支付类型">
									<span>{{ props.row.pay_type }}</span>
								</el-form-item>
								<el-form-item label="应付金额">
									<span>{{ props.row.total_amount }}</span>
								</el-form-item>
								<el-form-item label="优惠金额">
									<span>{{ props.row.discountable_amount }}</span>
								</el-form-item>
								<el-form-item label="支付金额">
									<span>{{ props.row.pay_amount }}</span>
								</el-form-item>
								<el-form-item label="优惠金额">
									<span>{{ props.row.pay_amount }}</span>
								</el-form-item>
								<el-form-item label="退款金额">
									<span>{{ props.row.refund_money }}</span>
								</el-form-item>
								<el-form-item label="订单状态">
									<span v-if="props.row.status === 0">待支付</span>
									<span v-else-if="props.row.status === 1">已支付</span>
									<span v-else-if="props.row.status === 2">已退款</span>
								</el-form-item>
								<el-form-item label="订单备注">
									<span>{{ props.row.note }}</span>
								</el-form-item>
								<el-form-item label="支付时间">
									<span>{{ props.row.pay_time }}</span>
								</el-form-item>
								<el-form-item label="添加时间">
									<span>{{ props.row.create_time }}</span>
								</el-form-item>
								<el-form-item label="更新时间">
									<span>{{ props.row.update_time }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column sortable align="center" prop="order_id" label="订单ID" width="100"></el-table-column>
					<el-table-column align="center" prop="body" label="订单名称"></el-table-column>
					<el-table-column align="center" prop="user_name" label="商户名称"></el-table-column>
					<el-table-column sortable align="center" prop="pay_type" label="支付类型"></el-table-column>
					<el-table-column align="center" prop="pay_amount" label="支付金额"></el-table-column>
					<el-table-column align="center" prop="status" label="订单状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">未支付</span>
							<span v-else-if="scope.row.status === 1">已支付</span>
							<span v-else-if="scope.row.status === 2">已退款</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="create_time" label="下单时间"></el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="aa(scope.row)">按钮</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="whole-pagination">
				<el-pagination background layout="prev, pager, next" :page-size="size" :total="count"
					@current-change="currentPage"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				count: 0,
				size: 10,
				list: [],
				userID: JSON.parse(window.localStorage.userInfo).userId,
				// 搜索表单
				searchForm: {
					status: null
				},
				expands: [],
			};
		},
		methods: {
			clearFilter() {
				this.$refs.myTable.clearFilter();
				this.getList(1, {});
				this.down({});
				this.searchForm = {};
			},

			// 获取订单列表
			getList(page, form) {
				let that = this;
				this.$axios({
					url: "/admin/general/getUserOrder",
					data: {
						offset: page,
						limit: that.size,
						userID: that.userID,
						status: form.status,
						orderNo: form.orderNo ? form.orderNo : '',
						externalOrderNo: form.externalOrderNo ? form.externalOrderNo : '',
						channelOrderNo: form.channelOrderNo ? form.channelOrderNo : '',
						payType: form.payType ? form.payType : '',
						orderType: form.orderType ? form.orderType : '',
						startTime: form.time ? form.time[0] / 1000 : '',
						endTime: form.time ? form.time[1] / 1000 : ''
					},
					success(res) {
						if (res.data.code == 200) {
							that.list = res.data.content.data;
							that.count = res.data.content.count;
						} else {
							// that.$message({
							//     message: res.data.msg,
							//     type: "warning",
							// });
							that.$confirm(res.data.msg, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								 that.$router.push("/login");
							}).catch(() => {
								that.$router.push("/login");
							});
						}
					},
				});
			},
			//下载
			down(form) {
				let startTime = form.time ? form.time[0] / 1000 : '';
				let endTime = form.time ? form.time[1] / 1000 : '';
				if (!startTime) {
					this.$message({
						message: '请选择开始时间',
						type: "error",
					});
					return;
				}
				if (!endTime) {
					this.$message({
						message: '请选择结束时间',
						type: "error",
					});
					return;
				}
				window.open('https://openpay.duolaibei.com/admin/order/export?userID=' + this.userID + '&status=' + form
					.status + '&startTime=' + startTime + '&endTime=' + endTime);
			},
			currentPage(page) {
				let that = this;
				let form = this.searchForm;
				that.getList(page, form);
			},
		},
		created() {
			this.getList(1, {});
		},
	};
</script>


<style scoped>
	.input-w {
		width: 200px;
		margin: 0 5px 5px 0;
	}

	.shrink-box {
		width: 100%;
		font-size: 0;
	}

	.shrink-box>>>label {
		width: 100px;
		color: #99a9bf;
	}

	.shrink-box .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 33.333333%;
	}

	.title-center {
		width: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		color: black;
		font-weight: 700;
	}

	.img-box {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>
